<template>
  <div >
    <el-breadcrumb separator="/" style="margin-bottom:20px;font-size:14px;">
      <el-breadcrumb-item :to="{ path: '/govmain' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>填报完成</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs type="border-card">
      <el-tab-pane label="填报完成">
        <el-row :gutter="10">
          <el-col :span="6" >
            <el-button type="success" @click="passOrBack(true)">批量通过</el-button>
            <el-button type="warning"  @click="passOrBack(false)">批量退回</el-button>
            <el-button v-if="false" type="danger" @click="handleClickGoData">数据分析</el-button>
          </el-col>
        </el-row>
        <el-row style="padding-top:10px" :gutter="10"> 
           <el-col :span="4">
            <el-input v-model="agency_name" placeholder="输入单位名称"></el-input>
          </el-col>
          <el-col :span="4">
            <el-input v-model="licence" placeholder="输入许可证号"></el-input>
          </el-col>
          <template v-if="userinfo.regionInfo.group_level === 0">
            <el-col :span="4">
            <el-select v-model="pro" clearable placeholder="省份" @change="getCitiesOfProvince">
              <el-option
                v-for="item in provinces"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="city" clearable placeholder="城市" @change="getAreasOfCity">
              <el-option
                v-for="item in cities"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="area" clearable placeholder="区/县">
              <el-option
                v-for="item in areas"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
            </template>    
            <template v-else-if="userinfo.regionInfo.group_level === 1">
          <el-col :span="4">
            <el-select v-model="city" clearable placeholder="城市" @change="getAreasOfCity">
              <el-option
                v-for="item in cities"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="area" clearable placeholder="区/县">
              <el-option
                v-for="item in areas"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
            </template> 
            <template v-else>
          <el-col :span="4">
            <el-select v-model="area" clearable placeholder="区/县">
              <el-option
                v-for="item in areas"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
            </template> 
          
          <el-col :span="2">
            <el-button type="primary" icon="search" @click="searchNoFill()">搜索</el-button>
          </el-col>
        </el-row>  
        <div style="padding-top:10px;" v-loading="loading" element-loading-text="数据加载中，请稍后...">
          <el-table :data="agencyList.rows" border  style="width: 100%;" :fir="true" @select="selectAregion" @select-all="selectAregion">
            <el-table-column type="selection" header-align="center" align="center" width="55">
            </el-table-column>
            <el-table-column prop="licence" header-align="center" align="center" label="许可证编号">
            </el-table-column>
            <el-table-column prop="cName" header-align="center" align="center" label="单位名称">
            </el-table-column>
            <el-table-column prop="tele" header-align="center" width="150"  align="center" label="电话" >
            </el-table-column>
            <template v-if="userinfo.regionInfo.group_level === 0">
              <el-table-column  header-align="center"  align="center" width="120" label="省局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.provinceState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.provinceState === 3" type="danger">退回重填</el-tag>
                  <el-button v-else
                    size="small" type="primary" @click="handleClickAudit(scope.row,0)">点击审核</el-button>
                </template>
              </el-table-column>
              <el-table-column  header-align="center"  align="center" width="120" label="市局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.cityState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.cityState === 3" type="danger">退回重填</el-tag>
                  <el-tag v-else>还未审核</el-tag>
                </template>
              </el-table-column>
              <el-table-column header-align="center"  align="center" width="120" label="县局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.countryState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.countryState === 3" type="danger">退回重填</el-tag>
                  <el-tag v-else>还未审核</el-tag>
                </template>
              </el-table-column>
            </template>
            <template v-if="userinfo.regionInfo.group_level === 1">
              <el-table-column  header-align="center"  align="center" width="120" label="省局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.provinceState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.provinceState === 3" type="danger">退回重填</el-tag>
                 <el-button v-else
                    size="small" type="primary" @click="handleClickAudit(scope.row,0)">点击审核</el-button>
                </template>
              </el-table-column>
              <el-table-column  header-align="center"  align="center" width="120" label="市局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.cityState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.cityState === 3" type="danger">退回重填</el-tag>
                  <el-tag v-else>还未审核</el-tag>
                </template>
              </el-table-column>
              <el-table-column header-align="center"  align="center" width="120" label="县局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.countryState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.countryState === 3" type="danger">退回重填</el-tag>
                  <el-tag v-else>还未审核</el-tag>
                </template>
              </el-table-column>
            </template>
            <template v-if="userinfo.regionInfo.group_level === 2">
              <el-table-column  header-align="center"  align="center" width="120" label="省局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.provinceState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.provinceState === 3" type="danger">退回重填</el-tag>
                 <el-tag v-else>还未审核</el-tag>
                </template>
              </el-table-column>
              <el-table-column  header-align="center"  align="center" width="120" label="市局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.cityState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.cityState === 3" type="danger">退回重填</el-tag>
                  <el-button v-else
                    size="small" type="primary" @click="handleClickAudit(scope.row,0)">点击审核</el-button>
                </template>
              </el-table-column>
              <el-table-column header-align="center"  align="center" width="120" label="县局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.countryState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.countryState === 3" type="danger">退回重填</el-tag>
                  <el-button v-else
                    size="small" type="success" @click="handleClickAudit(scope.row,3)">代为审核</el-button>
                </template>
              </el-table-column>
            </template>
            <template v-if="userinfo.regionInfo.group_level === 3">
              <el-table-column  header-align="center"  align="center" width="120" label="省局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.provinceState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.provinceState === 3" type="danger">退回重填</el-tag>
                 <el-tag v-else>还未审核</el-tag>
                </template>
              </el-table-column>
              <el-table-column  header-align="center"  align="center" width="120" label="市局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.cityState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.cityState === 3" type="danger">退回重填</el-tag>
                  <el-tag v-else>还未审核</el-tag>
                </template>
              </el-table-column>
              <el-table-column header-align="center"  align="center" width="120" label="县局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.countryState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.countryState === 3" type="danger">退回重填</el-tag>
                  <el-button v-else
                    size="small" type="primary" @click="handleClickAudit(scope.row)">点击审核</el-button>
                </template>
              </el-table-column>
            </template>
          </el-table>
          <el-row style="float:right;">
            <el-col :span="24" style="padding-top:30px;float:right;">
              <el-pagination
                :page-size="50"
                @current-change="handlePageSizeChange"
                layout="total, prev, pager, next"
                :total="agencyList.count">
              </el-pagination>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="dialogTableVisible" :show-close="false">
      <div slot="title" style="text-align: center">
        审核旅行社季报
      </div>
      <v-view-report :showaudit="true"  :reportId="propReportId"  @hideDialog="hideDialog"></v-view-report>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import vViewReport from "./ViewReport.vue";
export default {
  components: {
    vViewReport
  },
  created() {
    this.loading = true;
    const data = {
      params: {
        region_id: this.userinfo.regionInfo.area_code,
        state: 1
      },
      pageNum: 1
    };
    this.$nextTick(() => {
      this.getAreaCodeArray();
      this.getAgencylist(data).then(
        () => {
          this.loading = false;
        },
        error => {
          this.$message.error(error.errorMessage);
        }
      ).finally(()=>{
        this.loading = false;
      });
    });
  },
  computed: {
    ...mapGetters(["userinfo", "agencyList"])
  },
  data() {
    return {
      loading: false,
      dialogTableVisible: false,
      provinces: [],
      cities: [],
      areas: [],
      pro: "",
      city: "",
      area: "",
      agency_name: "",
      licence: "",
      region_id: "",
      currentPage: 1,
      propReportId: 0,
      selectedRows: []
    };
  },
  methods: {
    ...mapActions([
      "getGovReportDetailForId",
      "setAuditReportGroupLevel",
      "getAgencylist",
    ]),
    handlePageSizeChange(val) {
      this.currentPage = val;
      this.searchNoFill();
    },
    handleClickGoData() {
      this.$router.push("/govdata");
    },
    handleClickAudit(row,groupLevel) {
      this.setAuditReportGroupLevel(groupLevel);
      this.getGovReportDetailForId(row.reportid).then(
        () => {
          this.dialogTableVisible = true;
          this.propReportId = row.reportid;
        },
        error => {
          this.$message.error(error.errorMessage);
        }
      );
    },
    getAreaCodeArray() {
      const _this = this;
      new Promise((resolve, reject) => {
        this.$http
          .fetchGet("/gov/area/" + _this.userinfo.regionInfo.area_code)
          .then(
            response => {
              if (_this.userinfo.regionInfo.group_level === 0) {
                _this.provinces = response.data.result.list;
              } else if (_this.userinfo.regionInfo.group_level === 1) {
                _this.cities = response.data.result.list;
              } else {
                _this.areas = response.data.result.list;
              }
            },
            response => {
              reject(response);
            }
          );
      });
    },
    getAreasOfCity(val) {
      this.area = "";
      const _this = this;
      new Promise((resolve, reject) => {
        this.$http.fetchGet("/gov/area/" + val).then(
          response => {
            _this.areas = response.data.result.list;
          },
          response => {
            reject(response);
          }
        );
      });
    },
    getCitiesOfProvince(val) {
      this.city = "";
      this.area = "";
      const _this = this;
      new Promise((resolve, reject) => {
        this.$http.fetchGet("/gov/area/" + val).then(
          response => {
            if (
              _this.pro === "110000" ||
              _this.pro === "120000" ||
              _this.pro === "310000" ||
              _this.pro === "500000"
            ) {
              _this.provinces.map(item => {
                if (item.id === _this.pro) {
                  this.cities.push(item);
                }
              });
            } else {
              _this.cities = response.data.result.list;
            }
          },
          response => {
            reject(response);
          }
        );
      });
    },
    searchNoFill() {
      this.loading = true;
      switch (this.userinfo.regionInfo.group_level) {
        case 0:
          if (this.pro !== "" && this.city === "" && this.area === "") {
            this.region_id = this.pro;
          } else if (this.pro !== "" && this.city !== "" && this.area === "") {
            this.region_id = this.city;
          } else {
            this.region_id = this.area;
          }
          break;
        case 1:
          if (this.city !== "" && this.area === "") {
            this.region_id = this.city;
          } else {
            this.region_id = this.area;
          }
          break;
        case 2:
          if (this.area !== "") {
            this.region_id = this.area;
          }
      }
      const data = {
        params: {
          region_id:
            this.region_id === ""
              ? this.userinfo.regionInfo.area_code
              : this.region_id,
          agency_name: this.agency_name,
          licence: this.licence,
          state: 1
        },
        pageNum: this.currentPage
      };
      this.getAgencylist(data).then(
        () => {
          setTimeout(() => {
            this.loading = false;
          }, 500);
        },
        error => {
          this.$message.error(error.errorMessage);
        }
      );
    },
    hideDialog() {
      this.dialogTableVisible = false;
      this.searchNoFill();
    },
    selectAregion(selection) {
      this.selectedRows = Array.from(selection);
    },
    passOrBack(auditstate) {
      if (this.selectedRows.length === 0) {
        this.$message({
          message: "请选择需要操作的数据！",
          type: "warning"
        });
        return false;
      }
      let text = "";
      let showmessage = "";
      if (auditstate) {
        text = "确定要批量通过这些选中的记录吗?";
        showmessage = "已全部通过";
      } else {
        text = "确定要批量退回这些选中的记录吗？";
        showmessage = "已全部退回";
      }
      let statusName = "";
      switch (this.userinfo.regionInfo.group_level) {
        case 0:
        case 1:
          status = "provinceState";
          break;
        case 2:
          status = "cityState";
          break;
        case 3:
          status = "countryState";
          break;
        default:
          break;
      }
      const obj = this.selectedRows.find(item => {
        return item[status] > 1;
      });
      if (obj) {
        this.$message({
          message: "所选择的数据中存在已审核过的数据，无法执行批量操作！",
          type: "warning"
        });
        return false;
      }
      this.$confirm(text, "提示", {
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let ids = "";

          this.loading = true;
          let provinceCount = 0;
          let cityCount = 0;
          let countryCount = 0;
          this.selectedRows.map(item => {
            ids += item.reportid + ",";
          });
          ids = ids.substring(0, ids.length - 1);


          const params = {
            ids: ids,
            state: auditstate,
            opinion: ""
          };
          new Promise((resolve, reject) => {
            this.$http
              .fetchPost("/gov/report/batchdeal", params)
              .then(
                response => {
                  if (response.errorCode == "0") {
                    this.$message({
                      type: "success",
                      message: showmessage
                    });
                    this.searchNoFill();
                  } else {
                    this.$message.error(response.errorMessage);
                  }
                  resolve(response);
                },
                error => {
                  reject(error);
                }
              )
              .finally(() => {
                this.loading = false;
              });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    }
  }
};
</script>